<script setup>
import Demo08Event03ComponentChildren01 from './demo08-event03-component-children01.vue';
import Demo08Event03ComponentChildren02 from './demo08-event03-component-children02.vue';
import Demo08Event03ComponentChildren03 from './demo08-event03-component-children03.vue';
</script>
<template>
<h2>子组件事件：demo08-event03-component.vue</h2>
  <zhtt-card title="定义自定义事件">
    子组件传过来的值：{{result}}
    <Demo08Event03ComponentChildren01 @onClickNode="onClickNode"></Demo08Event03ComponentChildren01>
  </zhtt-card>

  <zhtt-card title="验证抛出的事件">
    子组件传过来的值：{{JSON.stringify(result)}}
    <Demo08Event03ComponentChildren02 @submit="submitForm"></Demo08Event03ComponentChildren02>
  </zhtt-card>

  <zhtt-card title="$emit">
    子组件传过来的值：{{JSON.stringify(result)}}
    <Demo08Event03ComponentChildren03 @submit="submitForm"></Demo08Event03ComponentChildren03>
  </zhtt-card>
</template>

<script>
export default {
  data(){
    return {
      result:null
    }
  },
  methods:{
    onClickNode(v){
      this.result = v;
    },
    submitForm(v){
      this.result = v;
    }
  }
}
</script>